<template>
  <view>
    <!-- 页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">text 文本编辑</view>
    </view>
    <!-- 页面标题头end-->
    <!-- 主体begin-->
    <view>
      <view class="text-box">
        <text>{{text}}</text>
      </view>
      <button type="primary" @click="add()">添加行</button>
      <button type="warn" @click="del()">删除行</button>
    </view>
    <!-- 主体end-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      texts: [
        'hbuilder 400万开发者',
        'uni-app跨平台',
        'smartUI自定义框架'
      ],
      extraLine: [],
      text: 'guilin travel\n'
    }
  },
  methods: {
    /*添加行的函数*/
    add() {
      console.log('add......');
      this.extraLine.push(this.texts[this.extraLine.length % 3]);
      this.text = this.extraLine.join('\n');
    },
    /*删除行的函数*/
    del() {
      console.log('del......');
      this.extraLine.pop();
      this.text = this.extraLine.join('\n');
    }
  }
}
</script>

<style>

.text-box{
	background-color: #ccc9ca;
	min-height: 200upx;
	margin-bottom:40upx ;
	padding: 40upx 0;
	text-align: center;
}
</style>
